import React, { useState } from 'react';
import './ControlPanel.css';

const ControlPanel = ({
  animationSpeed,
  setAnimationSpeed,
  showComponents,
  setShowComponents,
  colors,
  setColors,
  showGrid,
  setShowGrid,
  showStats,
  setShowStats,
  onExport,
  showTelemetry,
  setShowTelemetry,
  showMissionControl,
  setShowMissionControl,
  showFormationControl,
  setShowFormationControl,
  showKeyboardControls,
  setShowKeyboardControls,
  showTrails,
  setShowTrails
}) => {
  // Dropdown states
  const [expandedSections, setExpandedSections] = useState({
    animation: false,
    components: false,
    colors: false,
    display: false,
    export: false,
    instructions: false
  });

  const toggleSection = (section) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  const handleComponentToggle = (component) => {
    setShowComponents(prev => ({
      ...prev,
      [component]: !prev[component]
    }));
  };

  const handleColorChange = (component, color) => {
    setColors(prev => ({
      ...prev,
      [component]: color
    }));
  };

  return (
    <div className="control-panel">
      <h2>🚁 Drone Controls</h2>

      {/* Animation Controls */}
      <div className="control-section">
        <div
          className="section-header"
          onClick={() => toggleSection('animation')}
        >
          <h3>⚡ Animation</h3>
          <span className={`dropdown-arrow ${expandedSections.animation ? 'expanded' : ''}`}>▼</span>
        </div>
        {expandedSections.animation && (
          <div className="section-content">
            <div className="control-item">
              <label>Propeller Speed:</label>
              <input
                type="range"
                min="0"
                max="3"
                step="0.1"
                value={animationSpeed}
                onChange={(e) => setAnimationSpeed(parseFloat(e.target.value))}
              />
              <span>{animationSpeed.toFixed(1)}x</span>
            </div>
          </div>
        )}
      </div>

      {/* Component Visibility */}
      <div className="control-section">
        <div
          className="section-header"
          onClick={() => toggleSection('components')}
        >
          <h3>🔧 Components</h3>
          <span className={`dropdown-arrow ${expandedSections.components ? 'expanded' : ''}`}>▼</span>
        </div>
        {expandedSections.components && (
          <div className="section-content">
            {Object.entries(showComponents).map(([component, visible]) => (
              <div key={component} className="control-item">
                <label>
                  <input
                    type="checkbox"
                    checked={visible}
                    onChange={() => handleComponentToggle(component)}
                  />
                  {component.charAt(0).toUpperCase() + component.slice(1)}
                </label>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Color Controls */}
      <div className="control-section">
        <div
          className="section-header"
          onClick={() => toggleSection('colors')}
        >
          <h3>🎨 Colors</h3>
          <span className={`dropdown-arrow ${expandedSections.colors ? 'expanded' : ''}`}>▼</span>
        </div>
        {expandedSections.colors && (
          <div className="section-content">
            {Object.entries(colors).map(([component, color]) => (
              <div key={component} className="control-item">
                <label>{component.charAt(0).toUpperCase() + component.slice(1)}:</label>
                <input
                  type="color"
                  value={color}
                  onChange={(e) => handleColorChange(component, e.target.value)}
                />
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Environment section removed - using simple background */}

      {/* Display Options */}
      <div className="control-section">
        <div
          className="section-header"
          onClick={() => toggleSection('display')}
        >
          <h3>👁️ Display & Panels</h3>
          <span className={`dropdown-arrow ${expandedSections.display ? 'expanded' : ''}`}>▼</span>
        </div>
        {expandedSections.display && (
          <div className="section-content">
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showGrid}
                  onChange={(e) => setShowGrid(e.target.checked)}
                />
                Show Grid
              </label>
            </div>
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showStats}
                  onChange={(e) => setShowStats(e.target.checked)}
                />
                Performance Stats
              </label>
            </div>
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showTelemetry}
                  onChange={(e) => setShowTelemetry(e.target.checked)}
                />
                Telemetry Display
              </label>
            </div>
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showMissionControl}
                  onChange={(e) => setShowMissionControl(e.target.checked)}
                />
                Mission Control
              </label>
            </div>
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showFormationControl}
                  onChange={(e) => setShowFormationControl(e.target.checked)}
                />
                Formation Control
              </label>
            </div>
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showKeyboardControls}
                  onChange={(e) => setShowKeyboardControls(e.target.checked)}
                />
                Keyboard Controls
              </label>
            </div>
            <div className="control-item">
              <label>
                <input
                  type="checkbox"
                  checked={showTrails}
                  onChange={(e) => setShowTrails(e.target.checked)}
                />
                Show Drone Trails
              </label>
            </div>
          </div>
        )}
      </div>

      {/* Export Options */}
      <div className="control-section">
        <div
          className="section-header"
          onClick={() => toggleSection('export')}
        >
          <h3>💾 Export</h3>
          <span className={`dropdown-arrow ${expandedSections.export ? 'expanded' : ''}`}>▼</span>
        </div>
        {expandedSections.export && (
          <div className="section-content">
            <button className="export-btn" onClick={() => onExport('screenshot')}>
              📸 Screenshot
            </button>
            <button className="export-btn" onClick={() => onExport('gltf')}>
              💾 Export GLTF
            </button>
          </div>
        )}
      </div>

      {/* Instructions */}
      <div className="control-section">
        <div
          className="section-header"
          onClick={() => toggleSection('instructions')}
        >
          <h3>📖 Controls</h3>
          <span className={`dropdown-arrow ${expandedSections.instructions ? 'expanded' : ''}`}>▼</span>
        </div>
        {expandedSections.instructions && (
          <div className="section-content">
            <div className="instructions">
              <p><strong>Mouse:</strong></p>
              <ul>
                <li>Left click + drag: Rotate</li>
                <li>Right click + drag: Pan</li>
                <li>Scroll: Zoom</li>
              </ul>
              <p><strong>Keyboard:</strong></p>
              <ul>
                <li>Arrow Keys / WASD: Move drone</li>
                <li>Space / R: Ascend</li>
                <li>Shift / F: Descend</li>
                <li>Q/E: Rotate</li>
                <li>T: Take off | L: Land | ESC: Emergency stop</li>
              </ul>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default ControlPanel;
